<template>
    <div id="box">
            <div id="title">
                <span id="back" @touchstart="back" class="fa fa-angle-left"></span>
                <span id="avatar">上传头像</span>
            </div>
        <label for="header" id="headerlabel" ref="headerlabel">
            <span>+</span>
            <p>点击添加图片或将图片拖拽至此</p>
        </label>
        <input type="file" id="header" name="header" style="display:none" accept="image/*" @change="header" multiple>
        <br>
        <button id="btn" @touchstart="upload">上传</button>

    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data: function() {
        return {
            sendFile: null,
        }
    },

    methods: {
        back:function(){
            history.back()
        },

        header: function(e) {
            var file = e.target.files[0];
            this.sendFile = file;

            var url = URL.createObjectURL(file);
            this.$refs.headerlabel.style.backgroundImage = ("background-image", "url(" + url + ")");
            this.$refs.headerlabel.textContent = ""
        },
        upload: function() {
            var formdata = new FormData();
            formdata.append('header', this.sendFile); ''
            this.http.post("/api/users/upload", formdata)
                .then(res => {
                    Toast({
                        message: '上传成功',
                        position: 'middle',
                        duration: 1000
                    });
                    location.hash="/user/logined"
                });

        }
    }
}


</script>

<style scoped>
#title{
    width: 100%;
    height: 7vh;
    border: solid 1px gainsboro;
    line-height: 7vh;
}
#avatar{
    margin-left: 32vw;
    font-size: 18px;
}
#back{
    cursor: pointer;
    font-size: 28px;
    margin-left: 3vw;
}
#box{
    height: 100vh;
    background-color: #EFEFEF;
}
#headerlabel {
    display: block;
    width: 100px;
    height: 100px;
    border: solid 5px pink;
    text-align: center;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 6vh;
}

#headerlabel span {
    font-size: 50px;
}

#headerlabel p {
    font-size: 5px;
}
button {
    cursor: pointer;
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    margin-top: 5vh;
    background-color: #FF9E93;
    border: solid 1px #FF9E93;
    border-radius: 8px;
    color: white;
    font-size: 20px;
}
</style>